<template>
	<view class="global-header">
		<view class="blank"
			:style="{
				height: statusBarHeight + 'px'
			}"
		></view>
		<!-- 头部主内容区域 -->
		<view class="header-content flex">
			<!-- 左边 -->
			<view class="left px-1 text-center mt-1 flex justify-between align-center">
				<slot name="left">
					{{leftText}}
				</slot>
			</view>
			<!-- 右边 -->
			<view class="center mt-1">
				<slot>
					<u-search :clearabled="searchAttr.clearabled || true"
						:actionText="searchAttr.actionText || ''"
						:inputAlign="searchAttr.inputAlign || 'left'"
						:height="searchAttr.height || 60"
						:placeholder="searchAttr.placeholder || '请输入搜索内容'"
						:inputStyle="searchAttr.showAction || inputStyle"
						:showAction="searchAttr.showAction || false"
						:searchIconSize="searchAttr.searchIconSize || 30"
						:color="searchAttr.color"
						@focus="$emit('focus')"
					></u-search>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		APP_NAME
	} from "@/config/global.js"
	
	export default {
		name: "global-header",
		props: {
			leftText: {
				type: String,
				default: APP_NAME
			},
			searchAttr: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			inputStyle() {
				if(this.searchAttr.inputStyle) return this.inputStyle;
				// #ifdef H5
				const style = {
					width: 470 + 'rpx'
				}
				// #endif
				// #ifndef H5
				const style = {
					width: 500 + 'rpx'
				}
				// #endif
				return style;
			}
		}, 
		data() {
			return {
				// 屏幕状态栏高度
				statusBarHeight: 0,
				appName: APP_NAME,
			};
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight;
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
.global-header{
	.blank{
		width: 100vw;
	}
	.header-content{
		.left{
			font-weight: bold;
			color: red;
			
		}
	}
}
</style>